<template>
    <div class="app-container">
        <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="8" :lg="7" :xl="5">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>个人信息</span>
                    </div>
                    <div>
                        <div style="text-align: center">
                            <el-upload class="avatar-uploader" :action="uploadPath" :headers="headers" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </div>

                        <el-form ref="dataForm" :model="user2" :rules="rules" label-position="left" label-width="80px">
                            <el-form-item label="真实姓名" prop="name">
                                <el-input style="width:100%" disabled v-model="user2.name" placeholder="请输入用户名称" />
                            </el-form-item>

                            <el-form-item label="性别" prop="sex">
                                <DictSelect style="width:100%" v-model="user2.sex" placeholder="性别" type="sex" />
                            </el-form-item>
                            <el-form-item label="手机号" prop="mobile">
                                <el-input maxlength="11" v-model="user2.mobile" placeholder="请输入手机号" />
                            </el-form-item>
                            <el-form-item label="邮箱" prop="email">
                                <el-input v-model="user2.email" placeholder="请输入邮箱" />
                            </el-form-item>
                            <el-form-item label="微信" prop="wechat">
                                <el-input v-model="user2.wechat" placeholder="请输入微信" />
                            </el-form-item>
                            <el-form-item label="钉钉" prop="ding">
                                <el-input v-model="user2.ding" placeholder="请输入钉钉" />
                            </el-form-item>
                            <el-form-item label="备注" prop="ding">
                                <el-input v-model="user2.remarks" placeholder="请输入备注" />
                            </el-form-item>
                        </el-form>
                        <div style="text-align: center" slot="footer" class="dialog-footer">
                            <el-button type="primary" @click="$refs.pass.dialog = true">修改密码
                            </el-button>
                            <el-button type="primary" @click="userUpdateSubmit()">提交</el-button>
                            <el-button @click="dialogAddOrUpdateServiceProvider = false">取 消</el-button>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <UpdatePass ref="pass" />
    </div>
</template>

<script>
import {
    getUserLog,
    update,
    uploadAvatar,
    get,
    updateUser
} from "@/api/system/user";
import DictSelect from "@/components/DictSelect";
import UpdatePass from "./updatePass";
import { getDeptList } from "@/api/system/dept";
import { getRoleList } from "@/api/system/role";
import { getToken, getTokenName } from "@/utils/auth";
export default {
    name: "Center",
    components: { UpdatePass, DictSelect },
    data() {
        return {
            ico: "el-icon-refresh",
            user: this.$store.state["system/user"].user,
            avatar: this.$store.state["system/user"].avatar,
            user2: { status: 1, deptId: null, roleIdList: [] },
            list: null,
            total: 0,
            listQuery: {
                pageNo: 1,
                pageSize: 10,
                orderByField: "createdAt",
                orderBy: "desc"
            },
            roleData: [],
            deptList: [],
            roleList: [],

            //上传的服务器
            uploadPath: "",
            headers: {}, //请求图片上传的头部
            imageUrl: "",
            defaultProps: {
                expandTrigger: "hover",
                checkStrictly: true,
                emitPath: false,
                children: "children",
                label: "name",
                value: "id"
            },

            //formLabelWidth: "120px",
            rules: {
                equipmentTypeIdDialog: [
                    {
                        required: true,
                        message: "请选择设备类型",
                        trigger: "blur"
                    }
                ]
            }
        };
    },
    computed: {},
    created() {
        // this.getDeptList();
        // this.getRoleList();

        // 获取部门信息

        //加载上传的地址
        this.uploadPath = uploadAvatar();

        //初始化加载头部信息
        this.headers[getTokenName()] = getToken();
        this.get();
    },
    methods: {
        //修改  修改数据
        userUpdateSubmit() {
            this.$refs["dataForm"].validate(valid => {
                if (valid) {
                    //console.log(this.user2);
                    updateUser(this.user2).then(() => {
                        this.dialogFormVisible = false;
                        // this.getDeptList();
                        // this.getRoleList();
                        this.get();
                        this.$notify({
                            title: "成功",
                            message: "更新成功",
                            type: "success",
                            duration: 2000
                        });
                    });
                }
            });
        },
        changeDeptList(e) {
            this.user2.roleIdList = [];
            this.roleList = this.roleData[e];
        },
        //文件上传成执行的函数
        handleAvatarSuccess(res) {
            if (res.code !== 0) {
                this.$message.error(res.msg);
            } else {
                this.imageUrl = res.data.f_url;
            }
        },

        //上传文件之前的函数
        beforeAvatarUpload(file) {
            const isJPG =
                file.type === "image/jpeg" || file.type === "image/png";
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error("上传头像图片只能是 JPG 或 PNG格式!");
            }
            if (!isLt2M) {
                this.$message.error("上传头像图片大小不能超过 2MB!");
            }
            return isJPG && isLt2M;
        },
        //提交用户

        getDeptList() {
            getDeptList().then(response => {
                this.deptList = response;
            });
        },
        getRoleList() {
            getRoleList().then(response => {
                this.roleData = response;
                console.log(response);
                console.log(this.roleData);
                //this.roleList = this.roleData[response.deptId];
                console.log("getrole");
                console.log(this.roleList);
                //执行完这个函数 执行下一个函数
                this.get();
            });
        },
        refresh() {
            this.getList();
        },
        get() {
            get(this.user.id).then(response => {
                this.user2 = response;

                this.roleList = this.roleData[response.deptId];
                this.imageUrl = response.avatar;
            });
        },

        getSex(val) {
            if (val == 0) {
                return "女";
            } else {
                return "男";
            }
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.avatar-uploader-icon {
    font-size: 28px;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
}

.avatar {
    width: 120px;
    height: 120px;
    display: block;
    border-radius: 50%;
}
.user-info {
    padding-left: 0px;
    list-style: none;
    li {
        border-bottom: 1px solid #f0f3f4;
        border-top: 1px solid #f0f3f4;
        padding: 11px 0px;
        font-size: 13px;
    }
    .user-right {
        float: right;

        a {
            color: #317ef3;
        }
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409eff;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
}
</style>

